.d-flex.mt-3.align-items-start
  - if show_username
    %i{ title: 'Comment', class: "fas fa-lg fa-comment #{ level > 1 ? 'd-none' : '' }" }
    = render(AvatarComponent.new(name: comment.user.name, email: comment.user.email, size: 35, shape: :circle, custom_css: 'avatars-counter'))
  .timeline-item-comment.ms-0.flex-fill.overflow-auto
    .comment-bubble.ms-3.position-relative{ id: "comment-#{comment.id}-bubble" }
      - if policy(comment).update? || policy(comment).destroy? || policy(Report.new(reportable: comment)).create?
        .dropdown.dropleft.float-end.mx-3.position-absolute.top-0.end-0
          = link_to('#', role: 'button', 'data-bs-toggle': 'dropdown', 'aria-expanded': 'false', id: "comment-#{comment.id}-dropdown-toggle") do
            %i.fas.fa-ellipsis
          .dropdown-menu
            - if policy(comment).update?
              = link_to("#edit_form_of_#{comment.id}", id: "edit_button_of_#{comment.id}", 'data-bs-toggle': 'collapse',
                        'data-comment-id': comment.id, class: 'dropdown-item collapsed edit-comment-button') do
                Edit
            - if Flipper.enabled?(:content_moderation, User.session)
              - if policy(comment).moderate?
                = button_to(comment.moderated? ? 'Permit' : 'Moderate', moderate_comment_path(comment),
                            class: 'dropdown-item', remote: true, form_class: 'moderate-form', params: { moderation_state: !comment.moderated? })
            - if policy(Report.new(reportable: comment)).create?
              = link_to('#', class: 'dropdown-item', id: "js-comment-#{comment.id}",
                        data: { 'bs-toggle': 'modal', 'bs-target': '#report-modal',
                                'modal-title': "Report comment from #{comment.user}",
                                'reportable-type': comment.class.name,
                                'reportable-id': comment.id }) do
                Report
            - if policy(comment).destroy?
              = link_to('#', data: { 'bs-toggle': 'modal', 'bs-target': '#delete-comment-modal',
                  confirmation_text: 'Please confirm deletion of comment',
                  action: comment_path(comment) },
                  class: 'dropdown-item delete_link', title: 'Delete comment') do
                Delete

      .ps-3.pe-5.py-2.border-bottom.d-flex.flex-column.flex-lg-row.justify-content-between.align-items-start.gap-2
        %span
          - if show_username
            = link_to(helpers.realname_with_login(comment.user), user_path(comment.user))
            commented
          = link_to(helpers.commentable_path(comment: comment),
                    name: "comment-#{comment.id}",
                    title: l(comment.created_at.utc)) do
            = render TimeComponent.new(time: comment.created_at)
          = render CommentHistoryComponent.new(comment)
        .d-inline-flex.justify-content-end.gap-1
          - helpers.comment_user_role_titles(comment).each do |title|
            %span.badge.border.border-secondary.text-secondary.text-capitalize
              = title
      - if comment.diff_file_index
        .comment-diff
          - if diff
            - action = comment.commentable
            - anchor = "diff_#{comment.diff_file_index}_n#{comment.diff_line_number}"
            .px-3.pt-3.pb-2
              = link_to(action.uniq_key, request_show_path(number: action.bs_request, request_action_id: action))
              >
              = link_to request_changes_path(number: action.bs_request, request_action_id: action, anchor:) do
                = render(DiffSubjectComponent.new(state: diff['state'], file_info: diff))
              - if comment.outdated?
                %span.badge.text-bg-warning Outdated
            = render(DiffComponent.new(diff: diff.dig('diff', '_content'), range:))
          - else
            %p.border-bottom.fst-italic.px-3.pt-3.pb-2
              The following comment was attached to a line that is outdated.
      .comment-bubble-content{ id: "comment-#{comment.id}-body" }
        = render ReportsNoticeComponent.new(reportable: comment, user: User.session)
        = helpers.render_as_markdown(comment)
      - if policy(comment).reply?
        .d-flex.justify-content-end.me-3.mb-2
          = link_to("#reply_form_of_#{comment.id}", id: "reply_button_of_#{comment.id}", 'data-bs-toggle': 'collapse',
                    class: 'fst-italic small collapsed') do
            Reply

      - if policy(comment).update?
        .collapse.comment-edit.p-3{ id: "edit_form_of_#{comment.id}" }
          = render(partial: 'webui/comment/comment_field', locals: { form_method: :put,
          comment: comment, commentable: commentable, element_suffix: "edit_#{comment.id}", has_cancel: true })

    -# This should be refactored to avoid relying on global state
    - if policy(comment).reply?
      .collapse.ms-4.mb-4{ id: "reply_form_of_#{comment.id}" }
        = render(partial: 'webui/comment/comment_field', locals: { form_method: :post,
          comment: comment.children.new, commentable: commentable, element_suffix: "reply_for_#{comment.id}", has_cancel: true })

    - if level <= 3
      - comment.children.includes(:user).each do |children|
        = render BsRequestCommentComponent.new(comment: children, level: level + 1, commentable: commentable)

- if level > 3
  - comment.children.includes(:user).each do |children|
    = render BsRequestCommentComponent.new(comment: children, level: level + 1, commentable: commentable)

:javascript
  $(document).on('click', '.edit-comment-button', function() {
    var commentId = $(this).data('comment-id');
    $(`#comment-${commentId}-body`).hide();
  });
  $(document).on('click', '.cancel-comment', function() {
    $(this).parents('.comment-bubble').children('.comment-bubble-content').show();
  });
